<template>
<!-- 写页面用的-->
     <!-- vue2 只能有一个外层div-->
    <div class="goods">
         <el-button type="primary" @click="jumpToAdd">添加项目</el-button>

        <div class="goods-list">
             <el-table
                :data="tableData1"
                stripe
                style="width: 100%">
                <el-table-column
                label="商品名称"
                aligh = "center"
                width="180">
                    <template slot-scope="scope">
                        <img class="goods-img" :src="scope.row.GoodsImage"/>
                      
                  </template>
                </el-table-column>
                <el-table-column
                prop="Title"
                label="商品名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="SaleAmount"
                label="价格"
                width="180">
                </el-table-column>
                <el-table-column
                prop="Brand"
                label="品牌">
                </el-table-column>
                <el-table-column
                prop="CreateDate"
                label="创建日期">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="delGoods(scope.row.Id)" type="text" size="small">删除</el-button>
                        <el-button  @click="jumpEdit(scope.row.Id)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="page-pagination">
              <!-- <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-size="100"
                layout="total, prev, pager, next"
                :total="1000">
               </el-pagination> -->

               <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
              </el-pagination>
            </div>
        </div>
        
    </div>
 
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
             pageNo: 1, //默认值为1
             tableData1:[]
        }
    },
    created(){

    },
    mounted(){
        this.getList()
    },
    methods:{
        getList(){
            let _this = this
            axios.get('https://ys.lumingx.com/api/manage/GoodsList', {
                params: {
                    pageNo: _this.pageNo,
                    pageSize:10
                }
            })
            .then(function (res) {
                console.log(res.data);
                _this.tableData1 = res.data.data
                _this.handleData(_this.tableData1)
            })
        },
        handleData(data){
            for(var i=0;i<data.length;i++){
                data[i].CreateDate = data[i].CreateDate.split("T")[0]
            }
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNo = val   //将点击获取的值赋值给pageNo
            this.getList()     //查询的时候，使用的pageNo就是刚才赋值的那个最新的值，比如刚才点击的是3，现在pageNo=3
        },
        //点击新增按钮，跳转到新增页面
        jumpToAdd(){
            this.$router.push({
                path:"/add-goods"
            })
        },
        //删除
        delGoods(id){
            alert(id)
        //获取到商品id，将id传给接口
        axios.get('https://ys.lumingx.com/api/manage/delGood', {
                params: {
                    id:id
                }
            })
            .then(function (res) {
                console.log(res.data);

            })
        },
      jumpEdit(id){
          console.log(id)
          this.$router.push({
                path:"/add-goods",
                query:{
                    id:id
                }
          })
      }
    }
}
</script>
<style lang="less" scoped>
.goods{
    .goods-list{
      .goods-img{
          width: 50px;
          height: 50px;
          display: block;
      }
    }
    .page-pagination{
        text-align: right;
    }
}

</style>